<template>
  <div class="left-container g-card h-100 flex-b flex-v">
    <div class="registory-list scorll-box">
      <div
        v-for="(item, index) in categoryList"
        :key="type === 'product' ? item.categoryName : item.libraryName"
        class="registory-item flex align-center pointer"
        :class="{ active: activeRegistory === index }"
        @click="activeRegistory = index"
      >
        <div class="flex align-center f1">
          <i class="icon el-icon-menu" />
          {{ type === "product" ? item.categoryName : item.libraryName }}
        </div>
        <el-popover
          v-if="activeRegistory === index"
          v-model="showPop"
          placement="right"
          width="80"
          trigger="manual"
        >
          <div
            class="mb pointer popover-name"
            style="margin-bottom: 10px"
            @click="
              editCategory(item);
              showPop = false;
            "
          >
            <i class="el-icon-edit-outline" /> 编辑
          </div>
          <div
            class="pointer popover-name red"
            @click.stop="
              delCategory(item);
              showPop = false;
            "
          >
            <i class="el-icon-delete" />
            删除
          </div>
          <div
            v-if="index !== 0"
            slot="reference"
            class="flex-e align-center"
            style="width: 40px; height: 20px"
            @click="handlePop"
          >
            <i class="el-icon-more blue pointer el-icon" />
          </div>
        </el-popover>
      </div>
    </div>
    <div class="registory-box">
      <div
        class="flex align-center add-btn link mb"
        @click="openAddRegistoryModal"
      >
        <img src="@/assets/images/add.png" alt="" class="icon">
        新建{{ typeText }}库
      </div>
      <!-- <div class="flex align-center add-btn link mb">
        <el-switch
          v-model="autoDel"
          style="margin-right: 5px"
          active-color="rgba(63, 140, 255, 1)"
          inactive-color="rgba(238, 239, 242, 1)"
        />
        自动删除已发布{{ typeText }}
      </div> -->
      <div class="flex-b align-center mb text-box">
        <div class="flex align-center">359.1M / 500G</div>
        <div class="flex-e align-center">
          <div class="flex-e align-center">
            <img src="@/assets/images/trush.png" alt="" class="icon">
            清理
          </div>
          <div class="line">|</div>
          <div class="flex-e align-center">
            <img src="@/assets/images/add-border.png" alt="" class="icon">
            扩容
          </div>
        </div>
      </div>
      <div class="flex-b align-center">
        <div class="progress-box">
          <div class="value" :style="{ width: progress }" />
        </div>
        <div class="text">{{ progress }}</div>
      </div>
    </div>
    <AddRegistoryModal
      ref="addRegistoryModal"
      :type="type"
      @get="addRegistoryList"
    />
    <UpdateRegistoryModal
      ref="updateRegistoryModal"
      :item="currentRegistory"
      :type="type"
      @get="updateRegistoryList"
    />
  </div>
</template>
<script>
import AddRegistoryModal from '../product/components/AddRegistoryModal.vue'
import UpdateRegistoryModal from '../product/components/UpdateRegistoryModal.vue'
import {
  addCategory,
  updateCategory,
  delCategory,
  getCategoryList
} from '@/api/product'
import { addLib, updateLib, delLib, getLibList } from '@/api/element'
export default {
  components: {
    AddRegistoryModal,
    UpdateRegistoryModal
  },
  props: {
    type: {
      type: String,
      default: 'product'
    }
  },
  data() {
    return {
      showPop: false,
      interfaceMap: {
        product: {
          addCategory: addCategory,
          updateCategory: updateCategory,
          delCategory: delCategory,
          getCategoryList: getCategoryList
        },
        element: {
          addCategory: addLib,
          updateCategory: updateLib,
          delCategory: delLib,
          getCategoryList: getLibList
        }
      },
      categoryList: [
        { categoryName: '通用素材', id: '0', libraryName: '通用素材' }
      ],
      activeRegistory: 0,
      stare: false,
      categoryPage: 1,
      categoryTotal: 0,
      autoDel: true,
      progress: '10%'
    }
  },
  computed: {
    currentRegistory() {
      return this.categoryList[this.activeRegistory]
        ? this.categoryList[this.activeRegistory]
        : {}
    },
    typeText() {
      return this.type === 'product' ? '视频' : '素材'
    }
  },
  watch: {
    currentRegistory(val) {
      this.$emit('getCategory', val)
    }
  },
  created() {
    this.init()
  },
  methods: {
    handlePop() {
      this.showPop = true
    },
    async init() {
      this.categoryPage = 1
      this.categoryTotal = 0
      this.categoryList = [
        { categoryName: '通用素材', id: '0', libraryName: '通用素材' }
      ]
      const res = await this.interfaceMap[this.type]['getCategoryList']()
      if (res.success) {
        const { current, total, records } = res.result
        this.categoryPage = current
        this.categoryTotal = total
        this.categoryList = [...this.categoryList, ...records]
        if (this.categoryList && this.categoryList.length) {
          this.$emit('refresh', this.currentRegistory)
        } else {
          this.$emit('refresh', {})
        }
      }
    },
    async addRegistoryList(obj) {
      const { name } = obj
      if (this.categoryList.some((item) => item.categoryList === name)) {
        this.$message.error('当前视频库已存在')
        return
      }
      const key = this.type === 'product' ? 'categoryName' : 'libraryName'
      const res = await this.interfaceMap[this.type]['addCategory']({
        [key]: name
      })
      if (res.success) {
        this.init()
      } else {
        this.$message.error(res.message)
      }
    },
    async updateRegistoryList(obj) {
      const { name, id } = obj
      if (this.categoryList.some((item) => item.categoryList === name)) {
        this.$message.error('当前视频库已存在')
        return
      }
      const key = this.type === 'product' ? 'categoryName' : 'libraryName'
      const res = await this.interfaceMap[this.type]['updateCategory']({
        [key]: name,
        id
      })

      if (res.success) {
        this.$message.success('修改成功')
        this.init()
        if (this.categoryList && this.categoryList.length) {
          this.$emit('refresh', this.currentRegistory)
        } else {
          this.$emit('refresh', {})
        }
      } else {
        this.$message.error(res.message)
      }
    },
    delCategory(item) {
      this.$confirm('确定要删除该素材库？', '删除素材库')
        .then(async() => {
          const res = await this.interfaceMap[this.type]['delCategory']({
            id: item.id.toString()
          })

          if (res.success) {
            this.$message.success('删除成功')
            if (this.categoryList && this.categoryList.length) {
              this.$emit('refresh', this.currentRegistory)
            } else {
              this.$emit('refresh', {})
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.warning('取消')
        })
    },
    openAddRegistoryModal() {
      this.$refs.addRegistoryModal.open()
    },
    editCategory() {
      this.$refs.updateRegistoryModal.open()
    }
  }
}
</script>
<style lang="scss" scoped>
.left-container {
  width: 300px;
  margin-right: 30px;
  .mb {
    margin-bottom: 10px;
  }
  .registory-box {
    .add-btn {
      font-size: 14px;

      .icon {
        margin-right: 5px;
      }
    }
    .text-box {
      font-size: 14px;
      .icon {
        margin-right: 5px;
      }
    }
    .line {
      margin-left: 5px;
      margin-right: 5px;
      font-size: 14px;
      color: rgba(166, 166, 166, 1);
    }
    .text {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
  }
  .registory-list {
    height: calc(100% - 150px);
    overflow-y: auto;
  }
  .registory-item {
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.94);
    box-sizing: border-box;
    padding: 0 16px;
    margin-bottom:10px;
    .icon {
      margin-right: 10px;
    }
  }
  .registory-item.active {
    background: rgba(63, 140, 255, 0.3);
    color: rgba(0, 111, 255, 1);
  }
}
</style>
